<template>
    <div class="header">
        <div class="content-wrapper">
            <div class="avatar">
                <img class="avatar-img" :src="seller.avatar">
            </div>
            <div class="shop-info">
                <h1 class="title">
                    <span class="title-icon"></span>
                    {{ seller.name }}
                </h1>
                <p class="desc">
                    {{ seller.description }}
                </p>
                <p class="price-info">
                    <span class="price-info-icon"></span>
                    在线支付满28减5
                </p>
            </div>
            <div class="sell-count-wrapper">
                <div>
                    <span class="sell-count">{{ seller.sellCount }}个</span>
                    <span class="icon-keyboard_arrow_right sell-count-icon"></span>
                </div>
            </div>
        </div>
        <div class="bulletin-wrapper" @click="showMerchantInfo">
            <span class="bulletin-wrapper-icon"></span>
            <span class="bulletin">{{ seller.bulletin }}</span>
            <span class="icon-keyboard_arrow_right bulletin-icon"></span>
        </div>
        <div class="mask-bg" :style="{background:background}"></div>
        <div class="mask"></div>
        <transition>
            <merchant-info v-show="isShowMI" @closeMI="handleClickClose" :seller='seller'></merchant-info>
        </transition>
    </div>
</template>

<script>
import MerchantInfo from './MerchantInfo'
export default {
  name: 'ProductHeader',
  props: ['seller'],
  data () {
    return {
      background: '',
      isShowMI: false
    }
  },
  methods: {
    showMerchantInfo () {
      this.isShowMI = true
    },
    handleClickClose (isShow) {
      this.isShowMI = isShow
    }
  },
  watch: {
    // 开始的seller是空 所以要监视一下等有数据过来了再在行间添加bg
    seller () {
      this.background = `url('${this.seller.avatar}')`
    }
  },
  components: {
    MerchantInfo
  }
}
</script>

<style lang="stylus" scoped>
.v-enter,
.v-leave-to{
    opacity 0
}

.v-enter-active,
.v-leave-active{
    transition all 0.8s ease
}

.header{
    width 100%
    height 2.68rem
    overflow hidden
    position relative
    .content-wrapper{
        display flex
        .avatar{
            width 1.28rem
            height 1.28rem
            // background red
            margin-top .48rem
            margin-left .48rem
            border-radius .04rem
            overflow hidden
            .avatar-img{
                width 100%
            }
        }
        .shop-info{
            margin-top .52rem
            margin-left .32rem
            overflow hidden
            .title{
                font-size .32rem
                color rgb(255,255,255)
                font-weight bold
                line-height .36rem
                .title-icon{
                    display inline-block
                    width .6rem
                    height 0.36rem
                    background url('../../../assets/imgs/brand.png') no-repeat center center
                    background-size 100%
                    vertical-align -.1rem
                }
            }
            .desc{
                font-size .24rem
                line-height .24rem
                font-weight 200
                color rgb(255,255,255)
                margin-top .16rem
            }
            .price-info{
                font-size .2rem
                line-height .24rem
                color rgb(255,255,255)
                font-weight 200
                margin-top .2rem
                .price-info-icon{
                    display inline-block
                    width 0.24rem
                    height 0.24rem
                    background url('../../../assets/imgs/decrease_1@2x.png') no-repeat center center
                    background-size 100%
                    vertical-align -.04rem
                }
            }
        }
        .sell-count-wrapper{
            min-width 0.96rem
            height 0.48rem
            background rgba(0,0,0,.2)
            border-radius .24rem
            position absolute
            bottom .92rem
            right .24rem
            font-size .2rem
            color rgb(255,255,255)
            font-weight 200
            text-align center
            line-height .48rem
            padding 0 .16rem
            overflow hidden
            box-sizing border-box
            .icon-keyboard_arrow_right:before {
                content: "\e905"
            }
            .sell-count-icon{
                vertical-align -.025rem
            }
        }
    }
    .bulletin-wrapper{
        width 100%
        height .56rem
        background rgba(7,17,27,.2)
        position absolute
        bottom 0
        left 0
        color rgb(255,255,255)
        font-weight 200
        font-size .24rem
        overflow hidden
        padding: 0 .44rem 0 .24rem
        box-sizing border-box
        .bulletin-wrapper-icon{
            display inline-block
            width 0.44rem
            height 0.24rem
            background url('../../../assets/imgs/bulletin@2x.png') no-repeat
            background-size: 22px 12px
            vertical-align -0.2rem
        }
        .bulletin{
            display inline-block
            margin-left 0.08rem
            line-height .56rem
            max-width 89%
            overflow hidden
            text-overflow:ellipsis
            white-space: nowrap
            vertical-align top
        }
        .bulletin-icon{
            position absolute
            right .24rem
            top .16rem
        }
    }
    .mask-bg{
        position absolute
        top 0
        left 0
        bottom 0
        right 0
        width 100%
        height 100%
        filter blur(.1rem)
        background-repeat: no-repeat
        background-position: center
        background-size: cover
        opacity: .6
        transform: translateZ(5px)
        z-index -2
    }
    .mask{
        background rgba(7,17,27,.5)
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        z-index: -1;
        transform: translateZ(5px);
    }
}
</style>
